<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="Responsive Web UI Kit &amp; Dashboard Template based on Bootstrap">
	<meta name="author" content="AdminKit">
	<meta name="keywords" content="adminkit, bootstrap, web ui kit, dashboard template, admin template">

	<link rel="shortcut icon" href="${pageContext.request.contextPath}/img/icons/icon-48x48.png"/>

	<title>用户管理界面</title>

	<link href="${pageContext.request.contextPath}/css/app.css" rel="stylesheet">
	<style type="text/css">
		a{
			text-decoration: none;
		}
		tr>td{
			color: black;
		}
	</style>
</head>

<body>
<div class="wrapper">
	<%@include file="../icn/sidebar.jsp" %>

	<div class="main">

		<%@include file="../icn/head.jsp" %>

		<div class="row" style="margin: 42px">
			<div class="col-8">
				 <div class="card flex-fill">
                     <div class="card-header">

                         <h3>用户管理</h3>
                     </div>
                     <table class="table table-hover my-0">
                         <thead >
                         <tr>
                             <th>用户名</th>
                             <th>密码</th>
                             <th>手机号码</th>
                             <th>邮箱</th>
                             <th>身份证号</th>
                             <th>性别</th>
                             <th>身份</th>
                             <th>创建时间</th>
                             <th>修改时间</th>
                             <th>地址</th>
                             <th>操作</th>
                         </tr>
                         </thead>
                         <tbody>
                         <c:forEach items="${userPage.list}" var="items">
                             <tr>
                                 <td><a  href="${pageContext.request.contextPath}/system/user/useritmes/${items.name}" style="text-decoration:none;color: black">${items.name}</a></td>
                                 <td >${items.password}</td>
                                 <td >${items.telephone}</td>
                                 <td >${items.email}</td>
                                 <td >${items.idCard}</td>
                                 <td >${items.sex}</td>
                                 <td >${items.role.name}</td>
                                 <td ><fmt:formatDate value="${items.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                 <td ><fmt:formatDate value="${items.updateTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                 <td>${items.address}</td>
                                 <td class="table-action">
                                     <a href="${pageContext.request.contextPath}/system/user/updateUser/${items.id}" class="btn btn-outline-success" style="width:80px;color:green ">修改</a>
                                     <a href="${pageContext.request.contextPath}/ResetPassword/${items.id}" class="btn btn-warning" style="text-decoration: none">重置密码</a>
                                 </td>
                             </tr>
                         </c:forEach>

                         </tbody>
                     </table>
                     <ul class="pagination pg-primary" style="margin-left: 10px">
                         <c:if test="${userPage.page!=1}">
                         <li class="page-item">
                             <a class="page-link" href="?page=${userPage.page-1}" aria-label="Previous">
                                 <span aria-hidden="true">&laquo;</span>
                                 <span class="sr-only">Previous</span>
                             </a>
                         </li>
                         </c:if>

                         <c:forEach begin="1" end="${userPage.pageSize}" var="i">
                         <li class="page-item ${userPage.page==i?'active':''}" >
                             <a class="page-link" href="?page=${i}">${i}</a></li>
                         </c:forEach>

                         <c:if test="${userPage.page!=userPage.pageSize}">
                         <li class="page-item">
                             <a class="page-link" href="?page=${userPage.page+1}" aria-label="Next">
                                 <span aria-hidden="true">&raquo;</span>
                                 <span class="sr-only">Next</span>
                             </a>
                         </li>
                         </c:if>
                         <span style="    position: relative;
    top: 2px;
    left: 20px;
    font-size: 17px">
                                        共：${userPage.count}条
                                    </span>

                 </div>
			</div>

		</div>

	</div>
</div>

</main>


<script src="${pageContext.request.contextPath}/js/vendor.js"></script>
<script src="${pageContext.request.contextPath}/js/app.js"></script>

<<%--script>
	$(function () {
		var ctx = document.getElementById('chartjs-dashboard-line').getContext("2d");
		var gradient = ctx.createLinearGradient(0, 0, 0, 225);
		gradient.addColorStop(0, 'rgba(215, 227, 244, 1)');
		gradient.addColorStop(1, 'rgba(215, 227, 244, 0)');
		// Line chart
		new Chart(document.getElementById("chartjs-dashboard-line"), {
			type: 'line',
			data: {
				labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
				datasets: [{
					label: "Sales ($)",
					fill: true,
					backgroundColor: gradient,
					borderColor: window.theme.primary,
					data: [
						2115,
						1562,
						1584,
						1892,
						1587,
						1923,
						2566,
						2448,
						2805,
						3438,
						2917,
						3327
					]
				}]
			},
			options: {
				maintainAspectRatio: false,
				legend: {
					display: false
				},
				tooltips: {
					intersect: false
				},
				hover: {
					intersect: true
				},
				plugins: {
					filler: {
						propagate: false
					}
				},
				scales: {
					xAxes: [{
						reverse: true,
						gridLines: {
							color: "rgba(0,0,0,0.0)"
						}
					}],
					yAxes: [{
						ticks: {
							stepSize: 1000
						},
						display: true,
						borderDash: [3, 3],
						gridLines: {
							color: "rgba(0,0,0,0.0)"
						}
					}]
				}
			}
		});
	});
</script>
<script>
	$(function () {
		// Pie chart
		new Chart(document.getElementById("chartjs-dashboard-pie"), {
			type: 'pie',
			data: {
				labels: ["Chrome", "Firefox", "IE"],
				datasets: [{
					data: [4306, 3801, 1689],
					backgroundColor: [
						window.theme.primary,
						window.theme.warning,
						window.theme.danger
					],
					borderWidth: 5
				}]
			},
			options: {
				responsive: !window.MSInputMethodContext,
				maintainAspectRatio: false,
				legend: {
					display: false
				},
				cutoutPercentage: 75
			}
		});
	});
</script>
<script>
	$(function () {
		// Bar chart
		new Chart(document.getElementById("chartjs-dashboard-bar"), {
			type: 'bar',
			data: {
				labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
				datasets: [{
					label: "This year",
					backgroundColor: window.theme.primary,
					borderColor: window.theme.primary,
					hoverBackgroundColor: window.theme.primary,
					hoverBorderColor: window.theme.primary,
					data: [54, 67, 41, 55, 62, 45, 55, 73, 60, 76, 48, 79],
					barPercentage: .75,
					categoryPercentage: .5
				}]
			},
			options: {
				maintainAspectRatio: false,
				legend: {
					display: false
				},
				scales: {
					yAxes: [{
						gridLines: {
							display: false
						},
						stacked: false,
						ticks: {
							stepSize: 20
						}
					}],
					xAxes: [{
						stacked: false,
						gridLines: {
							color: "transparent"
						}
					}]
				}
			}
		});
	});
</script>
<script>
	$(function () {
		$("#world_map").vectorMap({
			map: "world_mill",
			normalizeFunction: "polynomial",
			hoverOpacity: .7,
			hoverColor: false,
			regionStyle: {
				initial: {
					fill: "#e3eaef"
				}
			},
			markerStyle: {
				initial: {
					"r": 9,
					"fill": window.theme.primary,
					"fill-opacity": .95,
					"stroke": "#fff",
					"stroke-width": 7,
					"stroke-opacity": .4
				},
				hover: {
					"stroke": "#fff",
					"fill-opacity": 1,
					"stroke-width": 1.5
				}
			},
			backgroundColor: "transparent",
			zoomOnScroll: false,
			markers: [{
				latLng: [31.230391, 121.473701],
				name: "Shanghai"
			},
				{
					latLng: [28.704060, 77.102493],
					name: "Delhi"
				},
				{
					latLng: [6.524379, 3.379206],
					name: "Lagos"
				},
				{
					latLng: [35.689487, 139.691711],
					name: "Tokyo"
				},
				{
					latLng: [23.129110, 113.264381],
					name: "Guangzhou"
				},
				{
					latLng: [40.7127837, -74.0059413],
					name: "New York"
				},
				{
					latLng: [34.052235, -118.243683],
					name: "Los Angeles"
				},
				{
					latLng: [41.878113, -87.629799],
					name: "Chicago"
				},
				{
					latLng: [51.507351, -0.127758],
					name: "London"
				},
				{
					latLng: [40.416775, -3.703790],
					name: "Madrid"
				}
			]
		});
		setTimeout(function () {
			$(window).trigger('resize');
		}, 250)
	});
</script>
<script>
	$(function () {
		$('#datetimepicker-dashboard').datetimepicker({
			inline: true,
			sideBySide: false,
			format: 'L'
		});
	});
</script>--%>

</body>

</html>